<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="width: 100%; height: 200px"
    >
      <van-swipe-item v-for="item in lb" :key="item.id"
        ><img :src="item.img_url" alt="" style="width: 100%; height: 100%"
      /></van-swipe-item>
    </van-swipe>
    <div v-if="lb != ''"></div>
    <div v-else style="width: 100%; text-align: center">
      <van-loading size="24px">加载中...</van-loading>
    </div>
    <div class="dv"><div v-html="this.$route.query.item"></div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lb: "",
    };
  },
  mounted() {
    this.getlb();
  },
  methods: {
    getlb() {
      this.$http(
        "http://shop.bufantec.com/bufan/goods/detailaction?openId=13216484256&id=" +
          this.$route.query.id,
        "get"
      ).then((res) => {
        console.log(res.data.gallery);
        this.lb = res.data.gallery;
      });
    },
  },
};
</script>

<style lang='scss'>
.dv {
  width: 100%;
}
p > img {
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
